<script setup>
import { noneData } from '@/utils/data'
import Card from "./Card.vue"
import { ref, onMounted, onUnmounted, nextTick } from "vue"
import YikeModal from '@/components/YikeModal.vue'
import NewMessageModal from './NewMessageModal.vue'
import DetailMessageModal from './DetailMessageModal.vue'
import { useRoute, onBeforeRouteUpdate } from "vue-router"
import Picture from './Picture.vue'
import YikeView from '@/components/YikeView.vue'
import { getWall } from '@/api/wall'
import lottie from 'lottie-web'
import loading from '@/assets/loading.json'
import { useUserStore } from '@/store/user'


defineProps({
    wallType: Object,
    default: () => { }
})

const userStore = useUserStore()
const route = useRoute()
const id = ref(route.query.id)
const tagIndex = ref(0)
const messageList = ref([])
const isLoading = ref(false)
const page = ref(1)
const pagesize = ref(1000)


// 获取留言墙
const getWallList = () => {
    isLoading.value = true
    const data = ref({
        page: page.value,
        pagesize: pagesize.value,
        type: id.value,
        label: tagIndex.value,
        userId: userStore.ip
    })
    getWall(data.value).then(res => {
        messageList.value = res.result
    }).finally(() => isLoading.value = false )
}
onMounted(() => {
    getWallList()
    loadingAnimation()
})

// 留言墙和照片墙的切换标识
onBeforeRouteUpdate((to) => {
    id.value = to.query.id
    isShowModal.value = false
    showBtn.value = true
    isView.value = false
    tagIndex.value = 0
    messageList.value = []
    getWallList()
})

// 选择的标签
const changeTag = (index) => {
    tagIndex.value = index
    getWallList()
    closeMessageModal()
}

// 设置添加留言按钮的位置
let location = ref(30)
const setBtnLocation = () => {
    // 视图的高度
    const viewHeight = window.innerHeight || document.documentElement.clientHeight
    // 滚动的距离
    const scrollHeight = document.documentElement.scrollTop
    // 页面元素的高度
    const documentHeight = document.body.clientHeight
    if (viewHeight + scrollHeight >= documentHeight - 170) {
        location.value = 230
    } else {
        location.value = 30
    }
    // 加载更多数据
    // if (viewHeight + scrollHeight == documentHeight) {
    //     page.value += 1
    //     getWallList()
    // }
}
onMounted(() => {
    window.addEventListener('scroll', () => setBtnLocation())
})
onUnmounted(() => {
    window.removeEventListener('scroll')
})

// 是否显示添加留言按钮
const showBtn = ref(true)

// 点击添加留言
const title = ref('')
const isShowModal = ref(false)
const activeCard = ref(-1)
const detailCard = ref({})
const openMessageModal = (value, i) => {
    // 在留言弹窗下不能点击详情弹窗
    if (isShowModal.value && value === '详情' && title.value === '留言') {
        return
    }
    title.value = value
    isShowModal.value = true
    showBtn.value = false
    activeCard.value = i?.id
    detailCard.value = i
}

// 关闭弹窗
const closeMessageModal = () => {
    isShowModal.value = false
    showBtn.value = true
    activeCard.value = -1
    isView.value = false
}

// 预览图片
const isView = ref(false)
const viewData = ref({})
const viewPicture = (picture) => {
    isView.value = true
    title.value = '详情'
    // viewData.value.imgurl = picture.imgurl
    viewData.value = picture
    isShowModal.value = true
    detailCard.value = picture
}
// 切换预览
const changeView = (index) => {
    detailCard.value = messageList.value[index]
}

// 加载动画
const loadingAnimation = () => {
    if (isLoading.value) {
        nextTick(async () => {
            var params = {
                container: document.getElementById('lottie'),
                renderer: 'svg',// 渲染方式：svg、canvas
                loop: true,  // 循环播放，默认：false
                autoplay: true, //自动播放 ，默认：true
                animationData: loading
            }
            lottie.loadAnimation(params)
        })
    }
}

</script>

<template>
    <div>
        <h1 class="title">{{ wallType[id]?.name }}</h1>
        <div class="desc">{{ wallType[id]?.slogan }}</div>
        <div class="tag">
            <div class="btn" @click="changeTag(0)" :class="{ active: tagIndex === 0 }">全部</div>
            <div class="btn" @click="changeTag(index + 1)" :class="{ active: tagIndex === index + 1 }"
                v-for="tag, index in wallType[id]?.tag">{{ tag }}</div>
        </div>
        <!-- 留言墙 -->
        <div class="card-list" v-show="id == 0">
            <template v-if="isLoading == false">
                <Card :class="{ activeCard: activeCard === message.id }" class="hover" v-for="message in messageList"
                :i="message" @openModal="openMessageModal('详情', message)" />
            </template>
            <div class="noneData" v-if="messageList.length === 0 && isLoading == false">
                <img :src="noneData[id].img" alt="">
                <div class="noneDataMsg">{{ noneData[id].msg }}</div>
            </div>
        </div>
        <!-- 照片墙 -->
        <div class="picture-list" v-show="id == 1">
            <div class="list-body" v-if="isLoading == false">
                <Picture class="picture" @click="viewPicture(picture)" v-for="picture in messageList" :picture="picture" />
            </div>
            <div class="noneData" v-if="messageList.length === 0 && isLoading == false">
                <img :src="noneData[id].img" alt="">
                <div class="noneDataMsg">{{ noneData[id].msg }}</div>
            </div>
        </div>
        <!-- 加载 -->
        <div class="loading" v-show="isLoading">
            <div id="lottie"></div>
            <div class="loading-text">加载中...</div>
        </div>
        <!-- 添加留言按钮 -->
        <div class="addMessageBtn" :style="{ bottom: location + 'px' }" @click="openMessageModal('留言')" v-show="showBtn">
            <span class="iconfont icon-tianjia"></span>
        </div>
        <!-- 弹窗 -->
        <YikeModal :title="title" :isShowModal="isShowModal" @closeModal="closeMessageModal">
            <template #default>
                <NewMessageModal v-if="title === '留言'" @closeModal="closeMessageModal" @getWallList="getWallList" />
                <DetailMessageModal v-if="title === '详情'" :detail="detailCard" />
            </template>
        </YikeModal>
        <!-- 图片预览  -->
        <YikeView :messageList="messageList" :viewData="viewData" @changeView="changeView" v-if="isView" />
    </div>
</template>

<style lang="less" scoped>
.title {
    font-size: 56px;
    margin: 0 auto;
    text-align: center;
    margin-top: 46px;
}

.desc {
    font-size: 14px;
    color: #5B5B5B;
    text-align: center;
    margin-top: 20px;
}

.tag {
    margin-top: 40px;
    text-align: center;
    display: flex;
    justify-content: center;

    .btn {
        height: 28px;
        color: #5B5B5B;
        margin: 0 4px;
        padding: 0 14px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .active {
        height: 28px;
        line-height: 28px;
        border: 1px solid rgba(32, 32, 32, 1);
        border-radius: 14px;
        color: #202020;
        font-weight: 600;
    }
}

.card-list {
    width: 1500px;
    min-height: 400px;
    margin: auto;
    display: flex;
    margin-top: 28px;
    flex-wrap: wrap;
}

.picture-list {
    width: 88%;
    min-height: 400px;
    margin: auto;
    margin-top: 28px;

    .list-body {
        columns: 6;
        column-gap: 4px;
    }

    .picture {
        width: 276px;
        margin-bottom: 4px;
    }
}

.addMessageBtn {
    position: fixed;
    right: 15px;
    // bottom: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #202020;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    cursor: pointer;
    transition: all 0.3s;

    .iconfont {
        font-size: 24px;
    }
}

.hover:hover {
    transform: translateY(-6px);
    transition: all 0.4s;
}

.activeCard {
    border: 1px solid #3B73F0;
}

.noneData {
    width: 100%;
    text-align: center;
    padding-top: 80px;
    color: #949494;
    font-weight: 700;
    font-family: serif;
    font-size: 20px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
}

.loading {
    width: 100%;
    text-align: center;
    .loading-text {
        font-size: 24px;
        font-family: serif;
        color: #949494;
        margin-top: -50px;
    }
    #lottie {
        height: 200px;
        margin-top: 20px;
    }
}
</style>
